<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <input ref="inputFile" type="file" hidden @change="changeFile">
      <van-cell is-link title="头像" center @click="headPhoto">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>

      <van-cell is-link title="姓名" :value="user.name" @click="showName=true" />
      <van-cell is-link :value="user.gender===1?'男':'女'" title="性别" @click="showGender=true" />
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true" />
    </van-cell-group>
    <!-- 用户名 -->
    <van-dialog v-model="showName" title="用户名" show-cancel-button @confirm="confirmUserName">
      <van-field v-model="user.name" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false" />
      <van-cell title="男" is-link @click="saveGender(0)" />
      <van-cell title="女" is-link @click="saveGender(1)" />
    </van-popup>
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmBirthday"
        @cancel="cancelBirthday"
      />
    </van-popup>
  </div>
</template>

<script>
import { reqUploadImg } from '@/api/user'
import dayjs from 'dayjs'
import { reqDetailInfo, reqUpdateUserInfo } from '@/api/user'
export default {
  name: 'UserProfile',
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      userName: '',
      minDate: new Date('1990-1-1'),
      maxDate: new Date(),
      currentDate: ''
    }
  },
  created() {
    this.detailInfo()
  },
  methods: {
    async detailInfo() {
      const res = await reqDetailInfo()
      this.user = res.data
      this.currentDate = new Date(res.data.birthday)
    },
    async confirmUserName() {
      await reqUpdateUserInfo({
        name: this.user.name
      })
    },
    async saveGender(num) {
      this.user.gender === 1 ? this.user.gender = 0 : this.user.gender = 1
      await reqUpdateUserInfo({
        gender: num
      })
      this.showGender = !this.showGender
    },
    async confirmBirthday(value) {
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      await reqUpdateUserInfo({
        birthday: dayjs(value).format('YYYY-MM-DD')
      })
      this.showBirthday = !this.showBirthday
    },
    cancelBirthday() {
      this.showBirthday = !this.showBirthday
    },
    headPhoto() {
      console.dir(this.$refs.inputFile.click)
      this.$refs.inputFile.click()
    },
    async changeFile(e) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      const formData = new FormData()
      formData.append('photo', this.$refs.inputFile.files[0])
      const { data: { photo }} = await reqUploadImg(formData)
      this.user.photo = photo
      this.$toast.success('上传成功')
    }
  }
}
</script>

<style lang="scss">

</style>
